<template>
	<div class="swiper-container" ref="cur">
		<div class="swiper-wrapper">
			<div
				class="swiper-slide"
				v-for="(carousel, index) in list"
				:key="carousel.id"
			>
				<img :src="carousel.imgUrl" />
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>

		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
// 引入轮播图依赖包
import Swiper from 'swiper';
export default {
	name: 'Carsousel',
	props: ['list'],
	watch: {
		list: {
			// 立刻监听: 不管数据有没有变化, 上来立即监听一次
			//因为数据没有发生变化,所以必须立刻监听
			immediate: true,
			handler() {
				// 只能监听到数据已经有了, 但是 v-for 循环的数据还没办法确定, 因此还需要 nextTick
				this.$nextTick(() => {
					let mySwiper = new Swiper(this.$refs.cur, {
						effect: 'cube',
						autoplay: true,
						loop: true,
						// 如果需要分页器
						pagination: {
							el: '.swiper-pagination',
							clickable: true,
						},
						// 如果需要前进后退按钮
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					});
				});
			},
		},
	},
};
</script>

<style lang="scss" scoped></style>
